<template>
	<div v-loading="loading">
		<div class="coupon-card">
			<el-row :gutter="10">
				<el-col :xs="12" :sm="8" :md="8">
					<div class="app-main-content-box"><OnePointCard :data="cardData_1" /></div>
				</el-col>
			</el-row>
		</div>

		<div class="table-container app-main-content-box">
			<el-table :data="list" size="small" stripe border style="width: 100%" empty-text="暂无数据">
				<el-table-column prop="createTime" label="发行时间" fixed="left" width="150" />
				<el-table-column prop="couponName" label="券名称" />
				<el-table-column prop="couponCode" label="券码" />
				<el-table-column prop="couponType" label="券类型">
					<template slot-scope="scope">
						<span>{{ couponTypeOptions[scope.row.couponType] }}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="receiveWay" label="投放渠道">
          <template slot-scope="scope">
            <span>{{receiveWayOptions[scope.row.receiveWay]}}</span>
          </template>
        </el-table-column>-->
				<el-table-column prop="customerName" label="顾客" />
			</el-table>
			<!-- 分页 -->
			<!--      <pagination-direction-->
			<!--        v-if="paginationConfig.total!==0"-->
			<!--        :config="paginationConfig"-->
			<!--        @sizeschange="sizesChange"-->
			<!--        @pagechange="pageChange"-->
			<!--      ></pagination-direction>-->
		</div>
	</div>
</template>

<script>
import { getMemberGetCouponRecord } from '@/api/coupon';
import OnePointCard from './OnePointCard';
export default {
	components: {
		OnePointCard
	},
	props: {
		activeName: {
			type: String,
			require: true
		},
		vipDetail: {
			type: Object,
			require: true
		}
	},
	data() {
		return {
			// 配置
			paginationConfig: {
				// 分页配置
				direction: 'center', // 分页位置
				layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
				pageSizes: [10, 20], // 分页pages
				total: 0,
				page: 1, // 页数-默认1
				pageSize: 10 // 每页条数-默认10
			},
			couponTypeOptions: {
				GENERAL: '通用券',
				CASH: '代金券',
				DISCOUNT: '折扣券',
				cash: '代金券',
				discount: '折扣券',
				exchange: '兑换券',
				cash_wx_busi: '微信商家代金券',
				discount_wx_busi: '微信商家折扣券',
				cash_wx_pay: '微信支付代金券'
			},
			receiveWayOptions: {
				1: '优惠券二维码',
				2: '会员开卡赠送',
				3: '会员充值赠送',
				4: '会员邀请奖励',
				5: '积分商城兑换',
				6: '人工客服赠送'
			},
			// 状态
			loading: false,
			// 数据
			cardData_1: ['累计领券/张', 0],
			list: [],
			filterForm: {
				customerId: ''
			}
		};
	},
	watch: {
		activeName(val) {
			if (val === 'couponIssue') {
				this.fetchData();
			}
		}
	},
	mounted() {},
	methods: {
		/**
		 *  获取数据
		 */
		// 获取数据
		fetchData(page = this.paginationConfig.page, pageSize = this.paginationConfig.pageSize) {
			// this.$refs.filterForm.validate(async valid => {
			//   if (valid) {
			// 请求数据
			const params = Object.assign({}, this.filterForm);
			params.page = page;
			params.pageSize = pageSize;
			params.customerId = this.vipDetail.customer.id;
			this.loading = true;
			getMemberGetCouponRecord(params)
				.then(res => {
					this.list = res.data.list;
					this.paginationConfig.total = res.data.total;
					this.paginationConfig.page = res.data.pageNum;
					this.cardData_1.splice(1, 1, this.$options.filters.parseNumberToThousands(res.data.total, 0, false));
				})
				.catch(err => {})
				.finally(() => {
					this.loading = false;
				});
			// }
			// });
		},

		// 分页sizes改变
		sizesChange() {
			this.fetchData();
		},

		// 分页page改变
		pageChange() {
			this.fetchData();
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.coupon-card {
	.app-main-content-box {
		margin-bottom: 10px;
	}
}
</style>
